<template>
  <div class="home-container">
    <div class="quick-access">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="quick-card">
            <div class="quick-title">开发部署</div>
            <el-link type="primary" class="quick-link" @click="dialogVisible = true">创建连接</el-link><br />
            <el-link type="primary" class="quick-link" @click="openWorkflowDesigner">流程集成</el-link><br />
            <el-link type="primary" class="quick-link" @click="showDataServiceDialog = true">数据服务</el-link><br />
            <el-link type="primary" class="quick-link">API集成</el-link>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="quick-card">
            <div class="quick-title">运行管理</div>
            <el-link type="primary" class="quick-link">连接运行管理</el-link><br />
            <el-link type="primary" class="quick-link">流程运行管理</el-link><br />
            <el-link type="primary" class="quick-link">API运行管理</el-link>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="quick-card">
            <div class="quick-title">开发者门户</div>
            <el-link type="primary" class="quick-link">API门户管理</el-link><br />
            <el-link type="primary" class="quick-link">开发者管理</el-link><br />
            <el-link type="primary" class="quick-link">应用系统管理</el-link><br />
            <el-link type="primary" class="quick-link">API检索及调用</el-link>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="knowledge-base">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="kb-card">
            <div class="kb-title">视频教程</div>
            <div class="kb-desc">提供直观易懂的操作演示，适合不同层次用户的自主学习需求。</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="kb-card">
            <div class="kb-title">系统文档</div>
            <div class="kb-desc">全面详实的技术文献库，为开发者和管理员提供规范化的参考资料。</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="kb-card">
            <div class="kb-title">AI问答</div>
            <div class="kb-desc">利用人工智能技术解答用户疑问，提供实时响应的技术咨询。</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="kb-card">
            <div class="kb-title">官网</div>
            <div class="kb-desc">企业数字门户，展示产品信息、技术特点和成功案例，提供最新动态。</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="dialogVisible" title="选择连接类型" width="1100px" top="40px" :close-on-click-modal="false" class="choose-conn-dialog">
      <div class="dialog-content">
        <div class="dialog-sidebar">
          <el-input placeholder="请输入关键字" size="small" class="dialog-search" />
          <el-menu :default-active="activeType" class="dialog-menu" :router="false" @select="handleMenuSelect">
            <el-menu-item index="全部">全部 <span class="count">(46)</span></el-menu-item>
            <el-menu-item index="最近使用">最近使用 <span class="count">(0)</span></el-menu-item>
            <el-menu-item index="SQL DB">SQL DB <span class="count">(21)</span></el-menu-item>
            <el-menu-item index="文本文档">文本文档 <span class="count">(1)</span></el-menu-item>
            <el-menu-item index="NOSQL DB">NOSQL DB <span class="count">(2)</span></el-menu-item>
            <el-menu-item index="消息队列">消息队列 <span class="count">(2)</span></el-menu-item>
            <el-menu-item index="标准协议">标准协议 <span class="count">(14)</span></el-menu-item>
            <el-menu-item index="企业管理系统">企业管理系统 <span class="count">(1)</span></el-menu-item>
            <el-menu-item index="其他">其他 <span class="count">(1)</span></el-menu-item>
            <el-menu-item index="自定义">自定义 <span class="count">(5)</span></el-menu-item>
          </el-menu>
          <div class="create-connector">+ 创建连接器</div>
        </div>
        <div class="dialog-main">
          <el-row :gutter="20" v-if="activeType !== '文本文档'">
            <el-col v-for="item in dbList" :key="item.name" :span="4" class="db-col">
              <el-card class="db-card" shadow="hover">
                <div class="db-logo">
                  <img :src="item.logo" alt="logo" v-if="item.logo" style="width:36px;height:28px;object-fit:contain;" />
                  <div v-else class="db-logo-placeholder">LOGO</div>
                </div>
                <div class="db-name">{{ item.name }}</div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-else>
            <el-col :span="4" class="db-col">
              <el-card class="db-card excel-card" shadow="hover" @click="$emit('open-excel-tab')">
                <div class="db-logo">
                  <img :src="excelImg" alt="Excel" class="excel-img" style="width:45px;height:45px;object-fit:contain;" />
                </div>
                <div class="db-name">Excel</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateDialogOk">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showDataServiceDialog" title="选择数据服务类型" width="600px" top="30px" :close-on-click-modal="false" class="data-service-dialog" align-center>
      <div class="data-service-type-list">
        <div class="data-service-type-card" v-for="item in dataServiceTypes" :key="item.title" @click="handleDataServiceType(item)">
          <div class="data-service-type-icon" :style="{ color: item.color}">
            <component :is="item.icon" style="font-size:40px;" />
          </div>
          <div class="data-service-type-title">{{ item.title }}</div>
          <div class="data-service-type-desc">{{ item.desc }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import excelImg from '../assets/excel.png'
import emitter from '../event-bus'
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Document, Memo, MessageBox, DocumentAdd } from '@element-plus/icons-vue'
import TextDocServiceForm from './TextDocServiceForm.vue'
import HomeTab from './HomeTab.vue'
const router = useRouter()
const dialogVisible = ref(false)
const activeType = ref('SQL DB')
const activeTab = ref('home')
const dynamicTabs = ref([])
const handleMenuSelect = (key) => {
  activeType.value = key
}
const dbList = [
  { name: 'DM', logo: '' },
  { name: 'Doris', logo: '' },
  { name: 'GaussDB', logo: '' },
  { name: 'GBase8a', logo: '' },
  { name: 'GreenPlum', logo: '' },
  { name: 'HANA', logo: '' },
  { name: 'HighGo', logo: '' },
  { name: 'Kingbase', logo: '' },
  { name: 'Mysql', logo: '' },
  { name: 'OceanBaseByMySQL', logo: '' },
  { name: 'OceanBaseByOracle', logo: '' },
  { name: 'openGauss', logo: '' },
  { name: 'Oracle', logo: '' },
  { name: 'Postgresql', logo: '' },
  { name: 'SqlServer', logo: '' },
  { name: 'TiDB', logo: '' },
  { name: 'VastbaseG100ByMySQL', logo: '' },
  { name: 'VastbaseG100ByOracle', logo: '' },
  { name: 'VastbaseG100ByPostgreSQL', logo: '' },
  { name: 'VastbaseG100BySqlServer', logo: '' },
]
const showDataServiceDialog = ref(false)
const dataServiceTypes = [
  { title: '数据库', desc: '结构化数据存储', icon: Memo, color: '#409EFF' },
  { title: 'SOAP服务', desc: 'Web服务协议', icon: Document, color: '#FF9900' },
  { title: 'SAP服务', desc: 'SAP系统集成', icon: MessageBox, color: '#409EFF' },
  { title: '文本文档', desc: '文本文件处理', icon: DocumentAdd, color: '#67C23A' },
]
function handleDataServiceType(item) {
  showDataServiceDialog.value = false
  if (item.title === '文本文档') {
    emitter.emit('open-textdoc-tab')
    return
  }
  // 其他类型可按需扩展
}
function removeTab(name) {
  const idx = dynamicTabs.value.findIndex(tab => tab.name === name)
  if (idx !== -1) dynamicTabs.value.splice(idx, 1)
  if (activeTab.value === name) activeTab.value = 'home'
}
onMounted(() => {
  emitter.on('open-create-connection', openCreateDialog)
})
onUnmounted(() => {
  emitter.off('open-create-connection', openCreateDialog)
})
function openCreateDialog() {
  dialogVisible.value = true
}
function openWorkflowDesigner() {
  router.push('/workflow-designer')
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  width: 100%;
}
.quick-access {
  margin-top: 32px;
}
.quick-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.quick-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.quick-link {
  margin-bottom: 4px;
}
.knowledge-base {
  margin-top: 24px;
}
.kb-card {
  height: 180px;
  min-height: 180px;
}
.kb-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.kb-desc {
  color: #666;
  font-size: 14px;
}
.dialog-content {
  display: flex;
  flex-direction: row;
  min-height: 380px;
}
.dialog-sidebar {
  width: 200px;
  border-right: 1px solid #eee;
  padding: 12px 0 12px 0;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dialog-search {
  margin: 0 12px 12px 12px;
}
.dialog-menu {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 16px;
}
.create-connector {
  color: #aaa;
  font-size: 14px;
  text-align: center;
  margin: 16px 0 0 0;
  cursor: pointer;
}
.dialog-main {
  flex: 1;
  padding: 16px 0 0 24px;
  overflow-y: auto;
}
.db-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: box-shadow 0.2s, border 0.2s;
  border: 1px solid #f0f0f0;
  padding: 6px 0 4px 0;
}
.db-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
  border: 1px solid #7abf4b;
}
.db-logo {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}
.db-logo-placeholder {
  width: 36px;
  height: 28px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 11px;
  border-radius: 4px;
}
.db-name {
  font-size: 13px;
  text-align: center;
  color: #333;
}
.db-col {
  margin-bottom: 6px;
}
.excel-card {
  border: 1px solid #7abf4b;
  background: #f4f8eb;
}
.excel-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.excel-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.choose-conn-dialog >>> .el-dialog__body {
  padding-top: 0;
}
.data-service-dialog .el-dialog__body {
  padding: 24px 32px 32px 32px;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-service-type-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
  justify-items: center;
  align-items: start;
  width: 100%;
}
.data-service-type-card {
  width: 140px;
  height: 160px;
  background: #fafbfc;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, border 0.2s, background 0.2s;
  border: 2px solid transparent;
}
.data-service-type-card:hover {
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.12);
  border: 2px solid #409EFF;
  background: #fff;
}
.data-service-type-icon {
  margin-bottom: 8px;
}
.data-service-type-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}
.data-service-type-desc {
  font-size: 13px;
  color: #888;
}
</style> 